<template>
	<div>
		<navigationBar :backType="2" navigationTitle="选择技师" />

		<view class="wrap-head" :style="'top:' + navigationHeight + 'px'">
			<view class="head-address flex align-center just-between">
				<view class="left-address flex align-center">
					<image :src="getImageURL('home/location.png')" />
					<view class="f-28">
						当前定位:
						{{
							locationStatus === "loading"
								? "正在定位..."
								: locationStatus === "success"
								? locationInfo.city
								: "定位失败"
						}}
					</view>
				</view>

				<view class="right-again flex align-center" @click="onReLocation">
					<image :src="getImageURL('home/reget.png')" />
					<view class="f-24">重新获取</view>
				</view>
			</view>

			<view class="head-search flex align-center just-between">
				<picker
					mode="selector"
					:range="screenCityList"
					range-key="name"
					:value="screenCity"
					@change="onScreenCityChange"
				>
					<view class="city-bg flex align-center">
						<view class="f-28 limit-num-line"> {{ screenCity }} </view>
						<image :src="getImageURL('home/city_arrow_down.png')" />
					</view>
				</picker>

				<view class="search-bg flex align-center">
					<image :src="getImageURL('home/search.png')" />

					<input
						class="f-26 flex align-center"
						type="text"
						placeholder="请输入服务人名称"
						placeholder-class="place"
						v-model="keywords"
						@blur="onRefresh"
					/>
				</view>
			</view>
		</view>

		<view class="wrap paddingBottom">
			<technicianList :serviceID="serviceID" :list="list" />
		</view>

		<wrapFooter btnTitle="返回上页" @onClick="onBack" />
	</div>
</template>

<script>
	import { getCity } from "@/API/common.js";
	import { technicianListData } from "@/API/home.js";
	import wrapFooter from "@/components/footer/footer.vue";
	import location from "@/utils/location.js";
	import technicianList from "@/components/technicianList/technicianList.vue";

	export default {
		components: {
			wrapFooter,
			technicianList,
		},
		data() {
			return {
				serviceID: "", //服务ID
				navigationHeight: this.$navigationHeight,
				keywords: "",
				locationStatus: "loading",
				locationInfo: null,

				screenCity: "", //筛选的城市
				screenCityID: "", //筛选的城市ID
				screenCityList: [], //筛选的城市列表
				isShowEvaluate: false, //是否显示评价弹窗
				evaluateTechnicianID: 0, //评价的技师ID
				page: 1,
				total: 0,
				list: [],
			};
		},
		onLoad(options) {
			this.serviceID = options.serviceID;
			this.$nextTick(() => {
				this.getCityData();
				this.getLocation();
			});
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		methods: {
			/**
			 * 返回
			 */
			onBack() {
				uni.navigateBack();
			},
			/**
			 * 重新定位
			 */
			onReLocation() {
				this.locationStatus = "loading";
				this.getLocation();
			},
			/**
			 * 获取当前城市
			 */
			getLocation() {
				location.getLocation((res) => {
					this.locationStatus = res.status;
					this.locationInfo = res;
					this.calculatScreenCity();
				});
			},
			/**
			 * 计算筛选的城市
			 */
			calculatScreenCity() {
				if (this.screenCityList.length > 0 && this.locationInfo !== null) {
					let index = this.screenCityList.findIndex((item) => item.name === this.locationInfo.city);
					if (index == -1) {
						index = 0;
					}
					this.screenCity = this.screenCityList[index].name;
					this.screenCityID = this.screenCityList[index].id;

					this.onRefresh();
				}
			},
			/**
			 * 筛选城市
			 */
			onScreenCityChange(e) {
				let index = e.detail.value;

				this.screenCity = this.screenCityList[index].name;
				this.screenCityID = this.screenCityList[index].id;

				this.onRefresh();
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.list = [];
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				technicianListData({
					page: this.page,
					service_id: this.serviceID,
					area_id: this.screenCityID,
					keyword: this.keywords,
					lat: this.locationInfo.lat,
					lng: this.locationInfo.lng,
				}).then((res) => {
					this.total = res.data.total;
					const list = res.data.data;
					if (this.page === 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
			/**
			 * 获取城市信息
			 */
			getCityData() {
				getCity().then((res) => {
					this.screenCityList = res.data;

					this.calculatScreenCity();
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-head {
		position: sticky;
		left: 0;
		width: 100%;
		background-color: $bg-color;
		z-index: 90;

		.head-address {
			width: 100%;
			height: 88rpx;
			background-color: white;
			padding: 0 20rpx;
			box-sizing: border-box;

			.left-address {
				flex: 1;
				margin-right: 20rpx;
				overflow: hidden;

				> image {
					width: 24rpx;
					height: 28rpx;
				}
				> view {
					margin-left: 12rpx;
					flex: 1;
					overflow: hidden;
					color: $title-color;
				}
			}

			.right-again {
				> image {
					width: 24rpx;
					height: 24rpx;
				}
				> view {
					margin-left: 6rpx;
					color: $theme-color;
				}
			}
		}

		.head-search {
			margin-top: 20rpx;
			width: 100%;
			height: 116rpx;
			background-color: white;
			padding: 0 30rpx;
			box-sizing: border-box;

			.city-bg {
				max-width: 164rpx;
				margin-right: 10rpx;
				overflow: hidden;

				> view {
					--limit-num: 1;
					color: $title-color;
					overflow: hidden;
				}

				> image {
					margin-left: 12rpx;
					width: 20rpx;
					height: 12rpx;
				}
			}

			.search-bg {
				width: 516rpx;
				height: 60rpx;
				border-radius: 30rpx;
				overflow: hidden;
				background-color: #f5f6f8;

				> image {
					margin-left: 40rpx;
					width: 24rpx;
					height: 24rpx;
				}
				input {
					margin-left: 16rpx;
					flex: 1;
					margin-right: 20rpx;
					color: $title-color;
				}
				.place {
					color: $sub-title-color;
					line-height: 1;
				}
			}
		}
	}

	.wrap {
		--bottom-height: 140rpx;
	}
</style>
